<template>
  <div class="container" >
    <div class="aidsiadsa" v-show="dadaShow">
      <iframe src="https://hsgc.hairuige.com/web/#/" 
      allow='microphone;camera'
        style="width: 470px; height: 950px;background-color: #fff;"></iframe>
      <div class="close" @click="this.dadaShow = false">
        <img src="../../../public/imgs/关闭.png" alt="" srcset="">
      </div>
    </div>
    <div class="centertOP">
      <div v-for="(item, index) in topList" :key="index" class="centertOP-li">
        <div class="name"> {{ item.num }}</div>
        <div class="tittle">{{ item.title }}</div>
      </div>
    </div>
    <div class="centerBottom" @click="openAi">
    </div>
  </div>
</template>

<script>


export default {
  data() {
    return {
      topList: [
      ],
      srcL: '',
      dadaShow: false
    };
  },
  mounted() {
    this.little();
    // this.openAi();
  },
  beforeUnmount() {

  },
  methods: {
    little() {
      this.$axios
        .post("/api/survey/visit")
        .then((res) => {
          if (res.data.data) {
            this.topList = res.data.data;
          }
        })
        .catch((error) => {
          console.error("Failed to fetch chart data:", error);
        });
    },
    // async requestMicrophone() {
    //   try {
    //     // 检查浏览器支持性
    //     if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
    //       this.message = '您的浏览器不支持获取麦克风权限';
    //       return;
    //     }

    //     // 请求麦克风权限
    //     this.audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });
    //     this.message = '麦克风权限已授予';
    //     console.log('音频流:', this.audioStream);

    //     // 释放资源（可选）
    //     // this.stopMicrophone();
    //   } catch (error) {
    //     // 权限被拒绝或出错
    //     console.error('麦克风权限请求失败:', error);
    //     this.message = `麦克风权限请求失败: ${error.message}`;
    //   }
    // },
    // stopMicrophone() {
    //   if (this.audioStream) {
    //     this.audioStream.getTracks().forEach((track) => track.stop());
    //     this.audioStream = null;
    //     this.message = '麦克风已释放';
    //   }
    // },
    openAi() {
      this.dadaShow = true
    }
  }
};
</script>

<style scoped>
.container {
  width: 650px;
  height: 660px;
  margin-left: 45px;
}
iframe {
  pointer-events: auto;
  user-select: auto;
}

.centertOP {
  width: 665px;
  height: 74px;
  margin-top: 42px;
  display: flex;

  .centertOP-li {
    width: 210px;
    height: 74px;
    margin-left: 80px;
    color: #fff;

    .name {
      height: 30px;
      font-size: 24px;
      margin-top: 10px;
    }

    .tittle {
      font-size: 20px;
    }

  }
}

.centerBottom {
  margin-left: 185px;
  margin-top: 100px;
  width: 300px;
  height: 380px;

}

.aidsiadsa {
  margin-left: 105px;
  position: relative;
  z-index: 999;

  iframe {
    border-radius: 55px;
    border: 5px solid rgba(63, 185, 255, 1);
  }

  .close {
    width: 30px;
    height: 30px;
    position: absolute;
    margin-left: 220px
  }
}
</style>
